<template>
  <div class="dashboard-container flex flex-col">
    <div
      v-if="
        oem.context.state.indexUiSettings &&
        oem.context.state.indexUiSettings.hideImage
      "
      class="h-25"
    ></div>
    <div class="pt-2.5">
      <el-row>
        <el-col v-if="oem.showIndexLogo" :span="24" class="text-center"
          ><img ref="logo" class="inline-block h-20" :src="logoStr" alt="logo"
        /></el-col>
        <el-col
          v-if="oem.showIndexContent"
          :span="24"
          class="text-center mb-10 text-2xl"
          ><div class="text-[#d75f5f]">{{ oem.indexContent }}</div>
          <div
            v-if="
              oem.context.state.indexUiSettings &&
              oem.context.state.indexUiSettings.secondContent
            "
            class="text-gray-400 text-xl"
          >
            {{ oem.context.state.indexUiSettings.secondContent }}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16" :offset="4">
          <div>
            <el-input v-model="keywords" size="large" class="input-with-select">
              <template slot="prepend">
                <el-cascader
                  v-model="nation"
                  :options="nationList"
                  :style="{ width: '100%' }"
                  :props="{ checkStrictly: true }"
                  collapse-tags
                  filterable
                  clearable
                ></el-cascader>
              </template>
              <el-button slot="append" @click="search(nation, keywords)">
                {{ $t('dataSearch.search') }}
              </el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div
      v-if="
        !oem.context.state.indexUiSettings ||
        !oem.context.state.indexUiSettings.hideImage
      "
      class="search-bg flex justify-center items-center overflow-hidden"
    >
      <img
        class="flex-shrink-0 min-w-100% min-h-100%"
        src="~@/assets/search-bg.jpg"
      />
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  height: calc(100vh - 84px);
  background: white;
}

.el-input::v-deep .el-input-group__prepend {
  padding: 0;
  width: 225px;
}
.el-input::v-deep .el-input__inner {
  height: 54px;
}
.el-input::v-deep .el-input__inner[type='text'],
.el-input::v-deep .el-input-group__append {
  font-size: 24px;
}
.search-bg {
  margin: 10px 100px 0px;
}
</style>
<script>
import { UserModule } from '@/store/modules/user'
import { getAction } from '@/api/common'
import { OemModule } from '@/store/modules/oem'
export default {
  name: 'GlobalSearch',
  data() {
    return {
      // private currentRole = 'admin-dashboard'
      nation: [],
      keywords: '',
      nationList: [],
      logoStr: '',
    }
  },
  computed: {
    roles() {
      return UserModule.roles
    },
    oem() {
      return OemModule
    },
  },
  created() {
    this.fetchNationList()
    this.getLogo()
  },
  methods: {
    search(nation, keywords) {
      if (this.nation.length === 0) {
        this.$message.error(
          this.$t('common.select', [this.$t('common.nation')])
        )
        return
      }
      if (this.keywords.length === 0) {
        this.$message.error(
          this.$t('common.enter', [this.$t('common.keyword')])
        )
        return
      }
      this.$router.push(
        `/data-search/global-engine?nation=${nation}&keywords=${keywords}`
      )
    },

    async fetchNationList() {
      const res = await getAction(null, 'globalSearch/GetInit')
      const rec = (m) => {
        if (m.children) {
          return {
            label: m.geoNameCn,
            value: m.id,
            children: m.children.map(rec),
          }
        }
        return { label: m.geoNameCn, value: m.id }
      }
      this.nationList = res.data.nationList?.map(rec) ?? []
    },

    /**
     * 尝试重新设置logo
     */
    getLogo() {
      const defaultLogo = '/logo.png'
      // if (this.$common.IsInExe()) {
      //   this.$common.ExeInvoke(formProcess => {
      //     const res = formProcess.GetLogo()
      //     if (typeof res === 'string' && res) {
      //       this.$nextTick(() => {
      //         // @ts-ignore
      //         this.logoStr = 'data:image/png;base64,' + res
      //       })
      //     } else {
      //       this.logoStr = defaultLogo
      //     }
      //   })
      // } else {
      this.logoStr = defaultLogo
      // }
    },
  },
}
</script>
